<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/vue.js" charset="uft-8" type="text/javascript"></script>
    <title>Document</title>
    <style>
        body{
            font-family: 微软雅黑;
        }
        .title{
            background-color: #f8efef;
            font-size: 18px;
        }
        .title,.content{
            width: 510px;
            height: 36px;
            line-height: 36px;
            border: 1px solid #ddd;
        }
        .title div{
            text-align: center;
            float: left;
        }
        .title .col-1,.content .col-1{
            width: 80px;
        }
        .title .col-2,.content .co2-2{
            width: 270px;
        }
        .content{
            clear: both;
        }
        .content div{
            text-align: center;
            float: left;
        }

    </style>
</head>

<body>
    <div id="box">
        <div class="title">
            <div class="col-1">序号</div>
            <div class="col-1">省份</div>
            <div class="col-1">省会</div>
            <div class="col-2">旅游景点</div>
        </div>
        <div class="content" v-for="(tourist,index) in touristlist">
            <div class="col-1">{{index+1}}</div>
            <div class="col-1">{{tourist.province}}</div>
            <div class="col-1">{{tourist.city}}</div>
            <div class="col-2">{{tourist.spot}}</div>
        </div>
    </div>
    <script>
        new Vue(
            {
                el:'#box',
                data:{
                    touristlist:[
                        {province:"黑龙江",city:"哈尔滨市",spot:"太阳岛 圣索菲亚教堂 伏尔加庄园"},
                        {province:"吉林省",city:"长春市",spot:"净月潭 长影世纪城 伪满皇宫"},
                        {province:"辽宁省",city:"沈阳市",spot:"沈阳故宫 沈阳北陵 张氏帅府"},
                    ]
                }
            }
        )
    </script>
</body>

</html>